﻿
@model AddressModel
<input asp-for="Id" type="hidden" />
<input asp-for="NameEnabled" type="hidden" />
<input asp-for="NameRequired" type="hidden" />
<input asp-for="CompanyEnabled" type="hidden" />
<input asp-for="CompanyRequired" type="hidden" />
<input asp-for="ProvincesEnabled" type="hidden" />
<input asp-for="LatitudeEnabled" type="hidden" />
<input asp-for="LongitudeEnabled" type="hidden" />
<input asp-for="StreetAddressEnabled" type="hidden" />
<input asp-for="StreetAddressRequired" type="hidden" />
<input asp-for="StreetAddress2Enabled" type="hidden" />
<input asp-for="StreetAddress2Required" type="hidden" />
<input asp-for="ZipPostalCodeEnabled" type="hidden" />
<input asp-for="ZipPostalCodeRequired" type="hidden" />
<input asp-for="PhoneEnabled" type="hidden" />
<input asp-for="PhoneRequired" type="hidden" />
<input asp-for="FaxEnabled" type="hidden" />
<input asp-for="FaxRequired" type="hidden" />

@if (Model.NameEnabled)
{
    <div class="layui-form-item">
        <u-label asp-for="Name" />
        <div class="layui-input-inline">
            <u-editor asp-for="Name" />
            <span asp-validation-for="Name"></span>
        </div>
    </div>
}
@if (Model.CompanyEnabled)
{
    <div class="layui-form-item">
        <u-label asp-for="Company" />
        <div class="layui-input-inline">
            <u-editor asp-for="Company" />
            <span asp-validation-for="Company"></span>
        </div>
    </div>
}
@if (Model.ProvincesEnabled)
{
    <div class="layui-form-item">
        <u-label asp-for="ProvinceName" />
        <div class="layui-input-inline">
            <u-select asp-for="ProvinceName" data-value="@Html.Raw(Model.ProvinceName)" />
        </div>
    </div>
    <div class="layui-form-item">
        <u-label asp-for="CityName" data-value="@Html.Raw(Model.CityName)" />
        <div class="layui-input-inline">
            <u-select asp-for="CityName" />
        </div>
    </div>
    <div class="layui-form-item">
        <u-label asp-for="AreaName" data-value="@Html.Raw(Model.AreaName)" />
        <div class="layui-input-inline">
            <u-select asp-for="AreaName" />
        </div>
    </div>
}
@if (Model.StreetAddressEnabled)
{
    <div class="layui-form-item">
        <u-label asp-for="Address1" />
        <div class="layui-input-inline">
            <u-editor asp-for="Address1" />
            <span asp-validation-for="Address1"></span>
        </div>
    </div>
}
@if (Model.StreetAddress2Enabled)
{
    <div class="layui-form-item">
        <u-label asp-for="Address2" />
        <div class="layui-input-inline">
            <u-editor asp-for="Address2" />
            <span asp-validation-for="Address2"></span>
        </div>
    </div>
}
@if (Model.LatitudeEnabled && Model.LongitudeEnabled)
{
    <div class="layui-form-item">
        <u-label asp-for="Latitude" />
        <div class="layui-input-inline">
            <u-editor asp-for="Latitude" />
            <span asp-validation-for="Latitude"></span>
        </div>
    </div>
    <div class="layui-form-item">
        <u-label asp-for="Longitude" />
        <div class="layui-input-inline">
            <u-editor asp-for="Longitude" />
            <span asp-validation-for="Longitude"></span>
        </div>
    </div>
}
@if (Model.ZipPostalCodeEnabled)
{
    <div class="layui-form-item">
        <u-label asp-for="ZipPostalCode" />
        <div class="layui-input-inline">
            <u-editor asp-for="ZipPostalCode" />
            <span asp-validation-for="ZipPostalCode"></span>
        </div>
    </div>
}
@if (Model.PhoneEnabled)
{
    <div class="layui-form-item">
        <u-label asp-for="PhoneNumber" />
        <div class="layui-input-inline">
            <u-editor asp-for="PhoneNumber" />
            <span asp-validation-for="PhoneNumber"></span>
        </div>
    </div>
}
@if (Model.FaxEnabled)
{
    <div class="layui-form-item">
        <u-label asp-for="FaxNumber" />
        <div class="layui-input-inline">
            <u-editor asp-for="FaxNumber" />
            <span asp-validation-for="FaxNumber"></span>
        </div>
    </div>
}
<script type="text/javascript">
    $(function () {
        var ddlProvince = $("#@Html.IdFor(model => model.ProvinceName)");
        var ddlCity = $("#@Html.IdFor(model => model.CityName)");
        var ddlArea = $("#@Html.IdFor(model => model.AreaName)");
        ddlProvince.change(function () {
            var provinceId = $(this).val()||$(this).data("value");
            SelectCity(provinceId);
        });
        ddlCity.change(function () {
            var cityId = $(this).val() || $(this).data("value");;
            SelectArea(cityId);
        });

        var provinceId = ddlProvince.val() || ddlProvince.data("value");;
        SelectProvince(provinceId);

        function SelectProvince(provinceId) {
            var isChild = false;
            $.ajax({
                cache: false,
                type: "GET",
                url: "@(Url.Action("ProvincesSelector", "Common"))",
                data: { "selectedValue": provinceId },
                success: function (data) {
                    ddlProvince.html('');
                    ddlProvince.append($('<option></option>').val("").html("—请选择—"));
                    $.each(data, function (id, option) {
                        if (option.Selected) { isChild = true; }
                        ddlProvince.append($('<option></option>').val(option.Value).attr("selected", option.Selected).html(option.Text));
                    });
                },
                complete: function (obj) {
                    if (obj.status == 200) {
                        var dataStr = obj.responseText;
                        var data = eval("(" + dataStr + ")");
                        if ((data instanceof Array) && data.length > 0) {
                            var provinceId = isChild ? ddlProvince.val() : data[0].Value;
                            SelectCity(provinceId);

                        }
                    }
                }
            });
        }

        function SelectCity(provinceId) {
            var isChild = false;
            var cityId = ddlCity.val() || ddlCity.data("value");
            $.ajax({
                cache: false,
                type: "GET",
                url: "@(Url.Action("CitiesSelector", "Common"))",
                data: { "provincename": provinceId },
                success: function (data) {
                    ddlCity.html('');
                    ddlCity.append($('<option></option>').val("").html("—请选择—"));
                    $.each(data, function (id, option) {
                        if (option.Value == cityId) { isChild = true; }
                        ddlCity.append($('<option></option>').val(option.Value).attr("selected", option.Value == cityId ? true : false).html(option.Text));
                    });

                },
                complete: function (obj) {
                    if (obj.status == 200) {
                        var dataStr = obj.responseText;
                        var data = eval("(" + dataStr + ")");
                        if ((data instanceof Array) && data.length > 0) {
                            var cityId = isChild ? ddlCity.val() : data[0].Value;
                            SelectArea(cityId, provinceId);
                        }
                    }
                }
            });
        }

        function SelectArea(cityId, provinceId) {
            var areaId = ddlArea.val() || ddlArea.data("value");
            $.ajax({
                cache: false,
                type: "GET",
                url: "@(Url.Action("AreasSelector", "Common"))",
                data: { "cityname": cityId, "provincename": provinceId },
                success: function (data) {
                    ddlArea.css({ display: "none" });
                    ddlArea.html('');
                    ddlArea.append($('<option></option>').val("").html("—请选择—"));
                    $.each(data, function (id, option) {
                        ddlArea.append($('<option></option>').val(option.Value).attr("selected", option.Value == areaId ? true : false).html(option.Text));
                    });
                    if (ddlArea.html() != "") {
                        ddlArea.css({ display: "block" });
                    }
                }
            });
        }
    });
</script>
